<template>
  <div class="submit-page">
    <van-sticky>
      <van-nav-bar title="个人信息填写" left-text="" left-arrow @click-left="onClickLeft" />

      <div class="waring-title">您的信息我们将严格保密，请放心填写。</div>
    </van-sticky>

    <van-form @submit="onSubmit" input-align="right" error-message-align="right">
      <div class="section">
        <h3>个人资料</h3>
        <van-field v-model="form.name" name="name" label="您的姓名" placeholder="请输入您的姓名"
          :rules="[{ required: true, message: '请输入您的姓名' }]" />
        <van-field v-model="form.mobile" name="mobile" label="联系电话" placeholder="请输入您的手机号码" :rules="[
          { required: true, message: '请输入您的手机号码' },
          { pattern: mobilePattern, message: '手机号码格式错误' },
        ]" />
        <van-field v-model="form.idCard" name="idCard" label="身份证号" placeholder="请输入您的身份证号码" :rules="[
          { required: true, message: '请输入您的身份证号码' },
          { validator: idCardValidator, message: '身份证号码格式错误' },
        ]" />
        <select-picker v-model="form.maritalStatus" name="maritalStatus" placeholder="点击选择婚姻状况" label="婚姻状况"
          :columns="MSColumns" />
        <select-picker v-model="form.education" name="education" placeholder="点击选择学历" label="学历"
          :columns="EducColumns" />
      </div>
      <div class="section">
        <h3>工作信息</h3>
        <select-picker v-model="form.occupation" name="occupation" placeholder="点击选择职业" label="职业"
          :columns="OccuColumns" />
        <select-picker v-model="form.area" name="area" placeholder="点击选择所在城市" label="所在城市" :areaList="areaList" />
        <van-field v-model="form.address" name="address" label="详细地址" placeholder="请输入详细地址"
          :rules="[{ required: true, message: '请输入详细地址' }]" />
        <van-field v-model="form.email" name="email" label="电子邮件" placeholder="请输入电子邮件" :rules="[
          { required: true, message: '请输入电子邮件' },
          { pattern: emailPattern, message: '电子邮件格式错误' },
        ]" />
      </div>
      <div class="section">
        <h3>银行卡信息</h3>

        <van-field v-model="form.bankName" name="bankName" label="银行名称" placeholder="请输入银行名称"
          :rules="[{ required: true, message: '请输入银行名称' }]" />
        <van-field v-model="form.bankId" name="bankId" label="银行卡号" placeholder="请输入银行卡号"
          :rules="[{ required: true, message: '请输入银行卡号' }]" />
      </div>
      <div class="agree-content">
        <van-radio-group v-model="checked" icon-size="16px">
          <van-radio :name="true">我已阅读并同意</van-radio>
        </van-radio-group>
        <van-button class="agree-btn" type="primary" url="https://github.com">《公共服务信息查询授权书》</van-button>
      </div>
      <van-button class="submit-btn" :disabled="!checked" type="primary" native-type="submit">立即提交</van-button>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import selectPicker from "../components/selectPicker.vue";
import { areaList } from "@vant/area-data";
import router from "../router";
import axios from "axios";
import { showLoadingToast, showNotify } from "vant"
import { useRoute } from "vue-router";

document.title = "个人信息填写";
const route = useRoute()
const onClickLeft = () => history.back();

const form = reactive({
  name: "",
  mobile: "",
  idCard: "",
  maritalStatus: "",
  education: "",
  occupation: "",
  area: "",
  address: "",
  email: "",
  bankName: "",
  bankId: "",
});
const checked = ref(false);
const MSColumns = [
  { text: "已婚", value: "已婚" },
  { text: "未婚", value: "未婚" },
  { text: "离异", value: "离异" },
  { text: "其他", value: "其他" },
];
const EducColumns = [
  { text: "博士研究生", value: "博士研究生" },
  { text: "硕士研究生", value: "硕士研究生" },
  { text: "本科", value: "本科" },
  { text: "专科", value: "专科" },
  { text: "高中", value: "高中" },
  { text: "初中", value: "初中" },
  { text: "小学", value: "小学" },
];
const OccuColumns = [
  { text: "国家机构、党群组织、企业、事业单位", value: "国家机构、党群组织、企业、事业单位" },
  { text: "专业技术人员", value: "专业技术人员" },
  { text: "办事人员和有关人员", value: "办事人员和有关人员" },
  { text: "商业、服务业人员", value: "商业、服务业人员" },
  { text: "农、林、牧、渔、水利业生产人员", value: "农、林、牧、渔、水利业生产人员" },
  { text: "其他", value: "其他" },
];
// 校验
const mobilePattern = /^1[3456789]\d{9}$/;
const emailPattern = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
const idCardValidator = (val) => {
  const card15 =
    /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/;
  const card18 =
    /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  return card15.test(val) || card18.test(val);
};

const onSubmit = async (values) => {

  const { data } = await axios.post(
    `${import.meta.env.VITE_APP_BASE_API}/api/v1/identity/submit`,
    {
      ticket: route.query.tk,
      ...values,
    }
  );
  // console.log(res, "res---");
  const toast = showLoadingToast({
    message: "系统正在审核中...",
    overlay: true,
    duration: 0,
  })
  setTimeout(() => {
    toast.close();
    if (data.code == 200) {
      // console.log(data.data, 'data----')
      router.push({ path: "/result", query: data.data });
      // router.push({ path: "/result", query: {
      //   loanLimit: 3000000,
      //   showInfo: "需满足银行卡流水100万"
      // } });
    } else {
      showNotify({ type: 'danger', message: data.msg });
    }
  }, 5000)
};
</script>

<style lang="scss" scoped>
.submit-page {
  width: 100vw;
  font-size: 14px;
  background: var(--app-bg);
  padding-bottom: 20px;

  .waring-title {
    background-color: #fffae4;
    color: #ff9f4b;
    padding: 10px 20px;
    font-size: 12px;
  }

  .section {
    margin: 10px 0;
    padding: 10px;
    background-color: #fff;

    h3 {
      margin-bottom: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--van-cell-border-color);
    }
  }

  :deep(.van-cell) {
    padding: 10px 0;

    &:after {
      left: 0;
      right: 0;
    }
  }

  :deep(.van-field__label) {
    color: #8d8d8d;
  }

  .agree-content {
    display: flex;
    align-items: center;
    padding-left: 26px;

    .agree-btn {
      background-color: transparent;
      color: var(--van-button-primary-background);
      border: none;
      padding-left: 2px;
    }
  }

  .submit-btn {
    display: block;
    width: calc(100vw - 60px);
    margin: 0 auto;
  }
}
</style>
